//
//  PokemenInfoRow.swift
//  PokeMaster
//
//  Created by 李腾芳 on 2022/1/8.
//  Copyright © 2022 OneV's Den. All rights reserved.
//

import SwiftUI

struct ToolButtonModifier: ViewModifier {
  //  typealias Body = Button
    
    func body(content: Content) -> some View {
        content  .foregroundColor(Color.white)
            .frame(width: 30, height: 30, alignment: Alignment.center)
    }
}

struct PokemenInfoRow: View {
    @EnvironmentObject var store: Store
    let model: PokemonViewModel
    let isExpand: Bool
    var body: some View {
        VStack {
            HStack {
                Image("Pokemon-\(model.id)", bundle: nil)
                    .resizable()
                    .frame(width: 50, height: 50, alignment: Alignment.center)
                    .aspectRatio(contentMode: SwiftUI.ContentMode.fit)
                    .shadow(radius: 4.0)
                Spacer()
                VStack {
                    Text(model.name)
                        .font(.title)
                        .foregroundColor(.white)
                    Text(model.nameEN)
                        .font(.subheadline)
                        .foregroundColor(.white)
                }
                
            }
            if isExpand {
                HStack(spacing: 10) {
                    Spacer()
                    Button {
                        print("fav")
                    } label: {
                        Image(systemName: "star")
                            .modifier(ToolButtonModifier())
                    }
                    Button {
                        print("Panel")
                        self.store.dispatch(AppAction.home(.showPokemonPanel(model: model)))
                    } label: {
                        Image(systemName: "chart.bar")
                            .modifier(ToolButtonModifier())
                    }
                    .onTapGesture {
                        print("Panel")
                        self.store.dispatch(AppAction.home(.showPokemonPanel(model: model)))
                    }
                    Button {
                        print("Web")
                    } label: {
                        Image(systemName: "info.circle")
                            .modifier(ToolButtonModifier())
                    }
                }
                .padding(Edge.Set.bottom, 12)
            }
            
        }
        .frame(height: isExpand ? 120 : 80)
        .padding(SwiftUI.EdgeInsets(top: 0, leading: 12, bottom: 0, trailing: 12))
        .background(
            ZStack {
                RoundedRectangle(cornerRadius: 20)
                    .stroke(model.color, style: StrokeStyle(lineWidth: 4))
                RoundedRectangle(cornerRadius: 20)
                    .fill(linearGradient)
            }
        )
        .animation(.default, value: isExpand)
//        .onTapGesture {
//            updateState()
//            
//        }
        
    }
    
//    func updateState() {
//        
//        let animation = Animation
//            .linear(duration: 0.2)
//        withAnimation(animation) {
//            isExpand = !isExpand
//        }
//    }
    
    var linearGradient: LinearGradient {
        let colors = [Color.white, model.color]
        return LinearGradient(colors: colors, startPoint: UnitPoint.leading, endPoint: UnitPoint.trailing)
    }
}

struct PokemenInfoRow_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
            PokemenInfoRow(model: PokemonViewModel.sample(id: 1), isExpand: false)
            PokemenInfoRow(model: PokemonViewModel.sample(id: 21), isExpand: true)
        }
    }
}
